<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				background: #eaeaea;
			}
			.div1{
				width: 190px;
				height: 266px;
				background: white;
				position: relative;
			}
			
			.div1 .div2{
				height: 120px;
				width: 120px;
				background: url(img/01.webp);
				background-size: 100%;
				position: absolute;
				top: 30px;
				left: 33px;
			}
			
			.div1 .div3 .p1{
				font-size: 12px;
				color: #666666;
				width: 165px;
				overflow:hidden;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				display: -webkit-box;
				position: absolute;
				top: 170px;
				left: 15px;
			}
			
			.div1 .div3 .p2{
				color: #e22b1b;
				position: absolute;
				top: 210px;
				left: 13px;
			}
			.div1 .div3 .p2 span{
				
				font-size: 13px;
			}
			.div1 .div4{
				width: 190px;
				height: 180px;
				position: absolute;
				background: rgba(255,255,255,0.3);
				display: none;
			}
			.div1 .div4 img{
				width: 10px;
				height: 10px;
				position: absolute;
				top: 10px;
				right: 10px;
			}
			.div1 .div5{
				width: 190px;
				height: 60px;
				position: absolute;
				top: 200px;
				background: rgb(255,255,255);
				display: none;
			}
			.div1 .div5 .div6{
				height: 28px;
				width: 97px;
				background: #333333;
				border-radius: 999em;
				position: absolute;
				top: 17px;
				left: 43px;
			}
			.div1 .div5 .div6 img{
				width: 17px;
				position: absolute;
				top: 4px;
				left: 18px;
			}
			.div1 .div5 .div6 span{
				color: white;
				font-size: 13px;
				position: absolute;
				top: 4px;
				left: 40px;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="div2">
			</div>
			<div class="div3">
				<p class="p1">耶棕床垫1.8m床棕垫床垫折叠棕榈偏硬垫经济型1.5米乳胶乳胶</p>
				<p class="p2"><span>￥</span>802.00</p>
			</div>
			<div class="div4">
				<img src="img/叉.png" >
			</div>
			<div class="div5">
				<div class="div6">
					<img src="img/眼睛.png"/>
					<span>找相似</span>
				</div>
			</div>
		</div>
		<script>
			window.onload=function(){
				function $(name) {
					//封装选择器
					return document.querySelector(name);
				}
				var div1=$('.div1');
				var div4=$('.div4');
				var div5=$('.div5');
				div1.onmousemove=function(){
					div4.style.display="block";
					div5.style.display="block"
				}
				div1.onmouseout=function(){
					div4.style.display="none";
					div5.style.display="none";
				}
			}
		</script>
	</body>
</html>
